define(
   [
      'dojo/_base/declare',
      'dojo/_base/lang',
      'dojo/on',
      'dojo/html',
      'dojo/Evented',
      'dijit/_WidgetBase',
      'dijit/_TemplatedMixin',
      'dojo/data/ItemFileReadStore',
      'dijit/form/ComboBox',
      'dojo/text!./templates/IconPicker.html'
   ],
   function(declare, lang, on, html, Evented, _WidgetBase, _TemplatedMixin, ItemFileReadStore, ComboBox, template)
   {
      return declare("noBusinessBase/widgets/IconPicker", [_WidgetBase, _TemplatedMixin],
      {
         //Path to the template
         templateString: template,
      
         widgetsInTemplate: true,
         baseClass: 'IconPicker',
      
         store: new ItemFileReadStore({
            url: '/css/iconStore.js'
         }),
      
         constructor: function(args)
         {
            // Call Super
            dojo.safeMixin(this, args);
         },
         postscript: function(args)
         {
            // Called after constructors
            this.inherited(arguments);
         },
         postCreate: function()
         {
            // Run any parent postCreate processes - can be done at any point
            this.inherited(arguments);

           var HoverEvent = declare([Evented], {
               startup: function(){
                  // once we are done with startup, fire the "ready" event
                  this.emit("ready", {});
               }
            });
            this.hoverEvent = new HoverEvent({});
            this.own(this.hoverEvent.on('icon-hover', lang.hitch(this, function(child, node)
            {
               html.set(this.iconHoverNode, child.name[0]);
            })));

            var getRootFilePath = function(fullPath)
            {
               //Remove the icons/ prefix if it exists.
               if(fullPath.indexOf("icons/") === 0)
                  fullPath = fullPath.substr(6, fullPath.length);

               //Find the last '/' in the string and keep everything before it.
               for(var i = fullPath.length - 1; i >= 0; i--)
               {
                  if(fullPath[i] !== '/')
                     continue;

                  return fullPath.substr(0, i + 1);
               }

               //No '/' was found, so just use an empty starting category value.
               return "";
            };

            var categoryValue = getRootFilePath(this.textBoxValue);
      
            var filteringSelect = new ComboBox(
               {
                  name: "category",
                  store: this.store,
                  query: {type:"category"},
                  searchAttr: "name",
                  iconListNode: this.iconListNode,
                  iconCountNode: this.iconCountNode,
                  onChange: this.refreshIcons,
                  value: categoryValue
               },
               this.categoryComboBoxNode
            );

            this.refreshIcons(categoryValue);
      
            this.connections = [];
            this.connections.push(dojo.connect(this.iconListNode, 'onclick', this, 'iconClicked'));
         },
         iconClicked: function(e)
         {
            this.value = e.srcElement.getAttribute('uid');
            this.onChange(this.value);
         },
         onChange: function(value)
         {
         },
         refreshIcons: function(category)
         {
            // clear the icons that are there
            while (this.iconListNode.firstChild)
               this.iconListNode.removeChild(this.iconListNode.firstChild);
      
            // Populate with icons
            //Fetch the data.
            this.store.fetch({
               query: { name: category },
               onComplete: lang.hitch(this, function(items, request)
               {
                  for (var i = 0; i < items.length; i++)
                  {
                     var item = items[i];
                     this.iconCountNode.innerHTML = item.children.length;
                     for(var y = 0; y < item.children.length; y++)
                     {
                        var child = item.children[y];
                        var li = dojo.create(
                          "li",
                          {
                              innerHTML: '<img src="/js/dojo/dojo/resources/blank.gif" class="'+child['css'][0]+'" width="'+child['width'][0]+'" height="'+child['height'][0]+'" uid="' + child['uid'][0] + '"/>'
                          },
                          this.iconListNode
                        );
                        /*
                        this.own(on(li.childNodes[0], 'mouseover', lang.hitch(this, function()
                        {
                           this.hoverEvent.emit('icon-hover', child, li.childNodes[0]);
                        })));
                        */
                     }
                  }
               }),
               queryOptions: {
                  deep: true
               }
            });
         }
      });
   }
);
